<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿Taobao图片放大</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="small"><img src="images/wow1_Small.jpg" width="240" height="180" />
	<div class="zoom"></div>
</div>
<div class="big"><img src="images/wow1_Big.jpg" width="1600" height="1200" /></div>
<div class="print" id="print"></div>
<div class="showPicBox">
<div class="picZoomBt"><input type="button" style="background:url(images/leftBt.png) no-repeat" onclick="picStep(-1)" value="" /></div>
<div class="showPic" id="show">
	<div class="showAll" >
		<div class="show1">
			<img src="images/wow1_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow2_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow3_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow4_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow5_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow6_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow7_Small.jpg" onclick="change(this)" width="144" height="108" />
			<img src="images/wow8_Small.jpg" onclick="change(this)" width="144" height="108" />
		</div>
		<div class="show1"></div>
	</div>
	
</div>
<div class="picZoomBt"><input type="button" style="background:url(images/RightBt.png) no-repeat" onclick="picStep(1)" value="" /></div>
</div>
</body>
</html>
<script src="JS/func.js" type="text/javascript"></script>
<script language="javascript">
var oBody,oSmall,oSmallImg,oZoom,oBig,oBigImg,oShowPicBox,oShow,oShow1,oShow2;
var tTime,nSx,nSy,nSpeed=10;
var ie = !+"\v1";
getEle();
oShow2.innerHTML=oShow1.innerHTML;
tTime=window.setInterval(picMove,nSpeed);
oShowPicBox.onmouseover=function(){ window.clearInterval(tTime)};
oShowPicBox.onmouseout=function(){ tTime=window.setInterval(picMove,nSpeed)};
//tTime=setTimeout(function(){ picMove(); setTimeout(arguments.callee,nSpeed)},nSpeed);
//oShow.onmouseover=function(){ clearTimeout(tTime)};
//oShow.onmouseout=function(){ tTime=setTimeout(function(){ picMove(); setTimeout(arguments.callee,nSpeed)},nSpeed);}

function change(ele){
	oSmallImg.src=ele.src;
	oBigImg.src=oSmallImg.src.replace(/Small/g,'Big');	
}

function picMove(){
	if(oShow2.offsetWidth-oShow.scrollLeft<=0){
		oShow.scrollLeft-=oShow1.offsetWidth
		
	}
	else{
		oShow.scrollLeft++;
		//document.getElementById('print').innerHTML='oShow.scrollLeft='+oShow.scrollLeft+'<br>oShow2.offsetWidth-oShow.scrollLeft='+(oShow2.offsetWidth-oShow.scrollLeft)+'<br>oShow2.offsetWidth='+oShow2.offsetWidth;
	}
}
function picStep(i){
	if((oShow.scrollLeft+153*i)<=0){
		oShow.scrollLeft+=oShow1.offsetWidth
		
	}
	oShow.scrollLeft+=153*i;
	if(oShow2.offsetWidth-oShow.scrollLeft<=0){
		oShow.scrollLeft-=oShow1.offsetWidth
		
	}
}

oSmall.onmouseover = function (){ 
	oZoom.style.display = oBig.style.display = 'block';
	ie?oSmall.attachEvent('onmousemove',move):oSmall.addEventListener('mousemove',move,false);
}

oSmall.onmouseout = function (){
	oZoom.style.display = oBig.style.display = 'none';
	ie?oSmall.detachEvent('onmousemove',move):oSmall.removeEventListener('mousemove',move,false);
}

function getEle(){
	oBody=document.body;
	oSmall = getByClass(oBody,'small')[0];
	oSmallImg = oSmall.getElementsByTagName('img')[0]
	oZoom = getByClass(oSmall,'zoom')[0];
	oBig = getByClass(oBody,'big')[0];
	oBigImg = oBig.getElementsByTagName('img')[0];
	oShow=document.getElementById('show');
	oShowPicBox=getByClass(oBody,'showPicBox')[0];
	oShowBox=getByClass(oShow,'showAll')[0];
	oShow1=getByClass(oShowBox,'show1')[0];
	oShow2=getByClass(oShowBox,'show1')[1];
}

function move(e){
	var	oE = e||event;
	var x = oE.clientX-oSmall.offsetLeft-oZoom.offsetWidth/2;
	var y = oE.clientY-oSmall.offsetTop-oZoom.offsetHeight/2;
	if (x<0){
		x = 0;	
	}else if(x>oSmall.offsetWidth-oZoom.offsetWidth){
		x = oSmall.offsetWidth-oZoom.offsetWidth;
	}
	if (y<0){
		y = 0;	
	}else if(y>oSmall.offsetHeight-oZoom.offsetHeight){
		y = oSmall.offsetHeight-oZoom.offsetHeight;
	}	
	nSx = oBigImg.width/oSmallImg.width;
	nSy = oBigImg.height/oSmallImg.height;
	oZoom.style.left = x+'px';
	oZoom.style.top = y+'px';
	oBigImg.style.left = -nSx*x+'px';
	oBigImg.style.top = -nSy*y+'px';
	document.getElementById('print').innerHTML='oE.clientX='+oE.clientX+'<br>oE.clientY='+oE.clientY+'<br>oSmall.offsetLeft='+oSmall.offsetLeft+'<br>oSmall.offsetTop='+oSmall.offsetTop+'<br>oZoom.offsetWidth='+oZoom.offsetWidth+'<br>oZoom.offsetHeight='+oZoom.offsetHeight+'<br>x='+x+'<br>y='+y+'<br>oBigImg.style.left='+oBigImg.style.left+'<br>oBigImg.style.top='+oBigImg.style.top+'<br>nSy='+nSy+'<br>oBigImg.height='+oBigImg.height+'<br>oSmallImg.height='+oSmallImg.height;

}
</script>

